<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="block_basic" style="width: 100%"></div>
    <div class="buttonWrapper">
      <el-button type="primary" @click="changeShape('rectangle')">矩形</el-button>
      <el-button type="primary" @click="changeShape('hexagon')">六边形</el-button>
    </div>
  </div>
</template>

<script>
import { DataView } from "@antv/data-set";
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      chart: null,
      dataList:[],
    };
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "block_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/gaussion-distribution.json")
      .then((res) => res.json())
      .then((data) => {
      this.dataList = data;
      // 最后 dv 数据是 { count: 箱体内数据量，x:箱的 x 坐标集合， y: 箱的 y 坐标集合 }
      this.chart.data(this.transformData(data));
      
      this.chart.scale({
        y: { nice: true },
        count: { nice: true },
      });
      
      this.chart.tooltip({
        showTitle: false,
        showMarkers: false,
      });
      
      this.chart
        .polygon()
        .position("x*y")
        .color("count", "#BAE7FF-#1890FF-#0050B3")
        .style({
          lineWidth: 1,
          stroke: "#fff",
        });

      this.chart.interaction("element-active");

      this.chart.render();
    });
  },
  methods: {
    getData() {
      return 
    },
    transformData(data,type){
      const dv = new DataView().source(data);
      // 这里最重要的就是这个分箱操作。把一连串连续的数据根据他们的公共特性拆分到不同的箱体内。
      // 箱体是具有相同特性数据的集合。箱体的形状会影响集合内数据条数的大小。
      dv.transform({
        // 会根据 count 的数量大小改变图形的展示大小 
        // sizeByCount: "$state.sizeEncoding", // calculate bin size by binning count
        // 六边形分箱（二维的），这里用的是等距分箱
        type: type ? "bin." + type : "bin.hexagon",
        // 分箱的字段
        fields: ["x", "y"], // 对应坐标轴上的一个点
        // x方向分箱数为 10 ，y 方向上分箱数为 5
        // 照文档定义看，这里最后分箱的个数应该 <= 50 ，但实际上分了 76 个。暂时不明白具体怎么分的。
        bins: [10, 5],
      });
      return dv.rows
    },
    changeShape(type){
      this.chart.changeData(this.transformData(this.dataList,type));
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>